import { progressProps } from 'element-plus';
<!-- import { emit } from 'process'; import { dataType } from
'element-plus/es/components/table-v2/src/common.mjs'; import { dataType } from
'element-plus/es/components/table-v2/src/common.mjs'; import { progressProps }
from 'element-plus'; -->
<template>
  <!-- 
    参数说明：
    tableData：表格中的数据，通过接口获取
    columns：表格列标题，及操作
    selection：多选
    index:序号
    getRowKey：添加row-key
    getDataWay 获取表格数据的方式，1.通过url方式2.通过数据数组方式3.请求方式type:"post"|"get",默认"post"
   -->
  <div class="tableDiv">
    <el-table
      :data="tableData"
      :row-key="getRowKey"
      element-loading-text="加载中"
      @select="select"
      v-bind="$attrs"
      @select-all="selectAll"
    >
      <template v-if="$attrs.selection">
        <el-table-column type="selection" width="55" />
      </template>
      <template v-if="$attrs.index">
        <el-table-column
          type="index"
          label="序号"
          width="65"
          :resizable="false"
        >
        </el-table-column>
      </template>
      <template v-for="item in columns">
        <el-table-column
          :label="item.label"
          :width="item.width"
          :prop="item.name"
          v-if="!item.solt"
        />
        <el-table-column
          :label="item.label"
          :width="item.width"
          :prop="item.name"
          fixed="right"
          v-else
        >
          <template #default="scope">
            <slot name="group" v-bind="scope"></slot>
            <!-- <slot name="group" :row="scope.row" :$index="scope.$index"></slot> -->
          </template>
        </el-table-column>
      </template>
    </el-table>
    <tablePage
      :pagination="paginationObj"
      v-on:currentChange="handleCurrentChange"
      v-on:sizeChange="handleSizeChange"
      v-on:pageSizeChange="handlePageSizeChange"
    ></tablePage>
  </div>
</template>

<script setup lang="ts">
import tablePage from "../TablePage/index.vue";

const emit = defineEmits(["getTableListData"]);

const props = defineProps({
  columns: {
    default: [],
    type: Array,
  },
  tableData: {
    default: [],
    type: Array,
  },
  // 是否能多选
  // selection: {
  //   default: false,
  //   type: Boolean,
  // },
  // // 是否有序号
  // index: {
  //   default: false,
  //   type: Boolean,
  // },
  // el-table添加row-key
  getRowKey: {
    default: function () {},
    type: Function,
  },
  getDataWay: {
    default: {},
    type: Object,
  },
  pagination: {
    // pageNum,pageSize必传
    default: {},
    type: Object,
  },
});

// 选中数据
const checkedData = ref([]);
// 当用户手动勾选数据行的 Checkbox 时触发的事件
const select = (selection: any, row: any) => {
  if (selection.indexOf(row) >= 0) {
    if (checkedData.value.indexOf(row) == -1) {
      checkedData.value.push(row);
    }
  } else {
    checkedData.value.forEach((item, index) => {
      if (JSON.stringify(item) == JSON.stringify(row)) {
        checkedData.value.splice(index, 1);
      }
    });
  }
};
// 用户点击全部选择
const selectAll = (selection: any) => {
  if (selection.length > 0) {
    selection.forEach((item) => {
      if (
        JSON.stringify(checkedData.value).indexOf(JSON.stringify(item)) == -1
      ) {
        checkedData.value.push(item);
      }
    });
  } else {
    props.tableData.forEach((row) => {
      if (JSON.stringify(checkedData.value).indexOf(JSON.stringify(row)) >= 0) {
        let num = -1;
        checkedData.value.forEach((obj, index) => {
          //获取下标
          if (JSON.stringify(obj).indexOf(JSON.stringify(row)) >= 0) {
            num = index;
          }
        });
        checkedData.value.splice(num, 1);
      }
    });
  }
};
const paginationObj = ref({
  // pages: 3,
  pageNum: 1, //当前页
  pageSize: 10, //每页显示条数
  pageSizes: [10, 20, 30, 40, 50, 100],
  position: "center",
  layout: "total,prev,pager,next",
  // layout: "total,sizes,prev,pager,jumper,next",
  totalCount: 1000,
  totalPage: 100,
});
// 页码变化
const handleCurrentChange = (val: any) => {
  paginationObj.value.pageNum = val;
  loadData();
};
const handleSizeChange = (val: any) => {
  paginationObj.value.pageSize = val;
  loadData();
};
const handlePageSizeChange = (val: any) => {
  paginationObj.value.pageSize = val;
  loadData();
};
// searchParams:调用loaddata传过来的form表单参数
const loadData = (searchParams: any = {}) => {
  /*
  getDataWay: {
        dataType: "url",
        data: totalTransaction,
        param: {
          pageNum: 1, //当前页码
          pageSize: 10, // 每页展示数量
        },
        tableRequest: false,
      },
  */
  let dataParams = {};
  if (searchParams) {
    dataParams = Object.assign(props.getDataWay.param, searchParams);
    paginationObj.value.pageNum = 1;
  } else {
    dataParams = props.getDataWay.param || {};
  }
  if (props.getDataWay.dataType === "data") {
    // 已经获取到table数据,分页参数由props.getDataWay中定
    let tableData = props.getDataWay.data; //在父组件中通过接口获取到的数据
    paginationObj.value.pageNum = tableData.dt.pageNum;
    paginationObj.value.pageSize = tableData.dt.pageSize;
    paginationObj.value.totalPage = tableData.dt.totalPage; //总条数，目前分页组件中用不到这个参数
    paginationObj.value.totalCount = tableData.dt.totalCount;
    emit("getTableListData", tableData.dt.beans); //将拿到的数据暴露出去，给父组件
  } else if (props.getDataWay.dataType === "url") {
    // 优先选择props.getDataWay.param 中的分页参数作为请求参数
    let pageParam = {};
    pageParam.pageNum =
      dataParams.pageNum != null
        ? dataParams.pageNum
        : paginationObj.value.pageNum;
    pageParam.pageSize =
      dataParams.pageSize != null
        ? dataParams.paramPageSize
        : paginationObj.value.pageSize;

    // 分页参数和form表单参数
    props.getDataWay
      .data(Object.assign(dataParams, pageParam))
      .then((res) => {
        if (res.cd === "2000") {
          emit("getTableListData", res.dt.beans); //将获取到的数据暴露出去，给父组件
          if (paginationObj.value !== "") {
            paginationObj.value.pageNum = res.dt.pageNum;
            paginationObj.value.pageSize = res.dt.pageSize;
            paginationObj.value.totalPage = res.dt.totalPage;
            paginationObj.value.totalCount = res.dt.totalCount;
          }
        }
      })
      .catch((err: any) => {
        console.log(err, "获取列表报错，接口" + props.getDataWay.data);
      });
  }
};
onMounted(() => {
  // console.log(props.pagination);
  if (props.pagination.pageNum) {
    paginationObj.value.pageNum = props.pagination.pageNum;
  }
  if (props.pagination.pageSize) {
    paginationObj.value.pageSize = props.pagination.pageSize;
  }
  if (props.pagination.pageSizes) {
    paginationObj.value.pageSizes = props.pagination.pageSizes;
  }
  if (props.pagination.layout) {
    paginationObj.value.layout = props.pagination.layout;
  }

  // if (props.getDataWay.dataType.toLowerCase() === "url") {
  //   //   // 根据url发送请求获取table数据
  //   //   (this.getDataWay.tableRequest === undefined ||
  //   //     this.getDataWay.tableRequest) &&
  //   //     this.loadData(); //请求数据
  //   loadData(); //请求数据
  // }
  loadData(); //请求数据
});
defineExpose({ loadData });
</script>

<style scoped lang="scss">
.tableDiv {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
:deep(.el-table) {
  width: calc(100% - 40px);
  margin: 20px;
  height: 100%;
  flex: 1;
  th.el-table__cell {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }
  td.el-table__cell div {
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-family: MicrosoftYaHeiLight;
    color: #0f1824;
  }
  .el-button {
    color: $themeBlue;
  }
}
</style>
